<template>
  <view>
    <u-navbar title="日志" title-color="#000" title-size="38" :border-bottom="false"></u-navbar>

    <view class="online-type">
      <view class="online-type-text">
        <text class="title">在线状态：</text>
        <text class="type">在线中</text>
      </view>
      <view class="online-type-btn btn" @click="showLoad()">违章获取</view>
    </view>

    <!-- 间隔 -->
    <view class="col-interval"></view>

    <view class="monitoring-list" v-if="logData.length != 0">
      <view class="monitoring-list-head">
        <view>时间</view>
        <view>状态</view>
      </view>
      <view class="monitoring-list-item" v-for="item in logData">
        <view>{{item.created_at}}</view>
        <view>{{item.status_name}}</view>
      </view>
    </view>
    <view class="violation-none" v-else>
      <image src="/static/img/none-car.svg" mode=""></image>
      <view class="text">没有违章短信</view>
    </view>
  </view>
</template>

<script>
import { saveSms, logSms } from '@/api/sms.js';
export default {
  data() {
    return {
      sms: [],
      logData:[]
    };
  },
  onShow() {
    this.showLoad()
  },
  // watch: {
  //   sms(val) {
  //     // console.log(val, '111111111111');
  //     if(val.length>0){
  //       saveSms(val).then(res => {
  //         this.sms = []
  //         console.log(res.data.data);
  //       });
  //     }
  //   }
  // },
  onHide() {
    this.sms = []
  },
  methods: {
    showLoad(){
      try{
        this.readSms();
        this.obtainPhoneMessage();
      }catch(err){
        console.log(err);
      }
      logSms().then(res => {
         this.logData = res.data.data.data
      });
    },
    readSms() {
      const readSmsModule = uni.requireNativePlugin('lu-readSmsModule');
      let res = readSmsModule.readSms();

      if (res) {
        //开启
        // uni.showToast({
        //   title: "已开启短信权限",
        //   icon: "none",
        // });
      } else {
        //未开启
        uni.showToast({
          title: '未开启短信权限',
          icon: 'none'
        });
      }
    },
    //data [{"body":"短信内容","name":0,"phone":"电话","time":"时间","type":1}]
    obtainPhoneMessage() {
      let that = this;

      const readSmsModule = uni.requireNativePlugin('lu-readSmsModule');
      readSmsModule.obtainPhoneMessage(data => {
        // console.log(data.sms);
        that.sms = data.sms;
        console.log(data.sms);
        saveSms(data.sms).then(res => {
          this.sms = []
          console.log(res);
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.col-interval {
  height: 16rpx;
  background-color: #f3f6f8;
}
.online-type {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 40rpx 30rpx;
  &-text {
    font-size: 32rpx;
    font-weight: bold;
    .title {
      color: #999999;
    }
    .type {
      color: #08be02;
    }
  }
  &-btn {
    width: 152rpx;
    height: 54rpx;
    background-color: #2b6cfc;
    color: #ffffff;
    font-size: 28rpx;
    border-radius: 40rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.monitoring-list {
  &-head {
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
    color: #333333;
    font-weight: bold;
    font-size: 28rpx;
    border-bottom: 2rpx solid #e6e6e6;
  }
  &-item {
    padding: 30rpx;
    padding-bottom: 0;
    display: flex;
    justify-content: space-between;
    color: #666666;
    font-size: 28rpx;
  }
}

.violation-none {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  image {
    width: 400rpx;
    height: 400rpx;
    margin: 100rpx 0;
  }
  .text {
    margin-top: 0rpx;
    font-size: 34rpx;
  }
}
</style>
